<template>
  <div :class="className">
    <!-- style -->
    <div v-html="css"></div>
    <!-- 商品组 列表 -->
    <div style="width:100%">
      <div class="flex-j-sb nav-title">
        <div class="title">{{ datas.title }}</div>
        <div class="small_title">{{ datas.small_title }} ></div>
      </div>
      <div style="width:100%">
        <template v-if="datas.list && datas.get_style == 2">
          <div class="courseItem flex" v-for="item in datas.list" :key="item.id">
            <div class="courseItem-img">
              <img :src="item.thumb" alt="" />
            </div>
            <div class="wrap flex-j-sb wrap-lecturer">
              <p class="title ell" style="margin: 0;">{{ item.title }}</p>
              <div class="flex-a-c chapter flex-j-sb">
                <div class="chapter-left flex-a-c">
                  <img class="chapter-img" :src="item.lecturer_img" />
                  <span>{{ item.lecturer_name }}</span>
                </div>
                <div class="chapter-right">{{ item.chapter_count }}章{{ item.section_count }}节</div>
              </div>
              <div class="chapter-price flex">
                <div class="price" v-if="item.price !== '0'"><span>￥</span>{{ item.price }}</div>
                <div class="price" v-else>免费</div>
                <div class="purchased">已购 xx</div>
              </div>
            </div>
          </div>
        </template>
        <template v-if="datas.list && datas.get_style == 1">
          <div class="courseItem flex" v-for="item in datas.get_number" :key="item.id">
            <div class="courseItem-img">
              <img :src="emptyImage" alt="" />
            </div>
            <div class="wrap flex-j-sb wrap-lecturer">
              <p class="title ell" style="margin: 0;">课程名称</p>
              <div class="flex-a-c chapter flex-j-sb">
                <div class="chapter-left flex-a-c">
                  <img class="chapter-img" :src="emptyImage" />
                  <span>讲师</span>
                </div>
                <div class="chapter-right">xx章xx节</div>
              </div>
              <div class="chapter-price flex">
                <div class="price"><span>￥</span>XXX.xx</div>
                <div class="purchased">已购 xx</div>
              </div>
            </div>
          </div>
        </template>

        <p v-show="(datas.list.length == 0 && datas.get_style == 2) || (datas.get_number == 0 && datas.get_style == 1)" style="text-align: center;padding: 10px;">暂无数据...</p>
      </div>
    </div>
  </div>
</template>

<script>
import emptyImage from "@/resource/images/image.png";
// 自定义样式
const css = function() {
  if (this.datas.preview_color) {
    const { preview_color,title_color,small_title_color } = this.datas;

    return `
        .component-${this.id}{
          background-color: ${preview_color};
        }

				.component-${this.id} .nav-title .title{
          color: ${title_color};
					font-size: 16px;
					font-weight: bold;
        }

				.component-${this.id} .nav-title .small_title{
          color: ${small_title_color};
					font-size: 12px;
        }
    `;
  }
};

export default {
  data() {
    return {
      emptyImage,
    };
  },
  props: ["id", "datas", "styles", "languages"],
  computed: {
    css() {
      return "<style>" + css.call(this) + "</style>";
    },
    className() {
      const name = ["component-wrapper", `component-${this.id}`];
      return name;
    },
  },
  methods: {},
  mounted() {},
};
</script>

<style lang="less" scoped>
// 默认
.component-wrapper {
  display: flex;
  justify-content: center;
  width: 375px;
}
/* 单行文本的溢出显示省略号 */
.pl {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ell {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  /* 定义显示的行数*/
  overflow: hidden;
}

.nav-title{
	padding: 10px 12px 0;
	line-height: 26px;
}
/* @import url(); 引入公共css类 */
.courseItem {
  background-color: #fff;
  padding: 10px 10px 12px 10px;
  margin: 10px;
  border-radius: 8px;
  .courseItem-img {
    min-width: 100px;
    width: 100px;
    height: 100px;
    border-radius: 8px;
    overflow: hidden;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  .wrap-lecturer {
    flex-direction: column;
  }
  .wrap {
    width: 72%;
    box-sizing: border-box;
    padding-left: 10px;
    .title {
      font-size: 15px;
      font-weight: 400;
      // line-height: 21px;
      color: #333333;
      text-align: left;
    }
    .chapter {
      background: #f6f7fb;
      border-radius: 2px;
      padding: 3px 0;
      .chapter-left {
        padding: 0 0 0 10px;
        img {
          width: 20px;
          height: 20px;
          background: #ffffff;
          border-radius: 50%;
        }
        span {
          font-size: 14px;
          font-weight: bold;
          color: #516ea9;
          line-height: 17px;
          padding-left: 6px;
        }
      }
      .chapter-right {
        font-size: 13px;
        font-weight: 500;
        color: #516ea9;
        line-height: 17px;
        padding-right: 13px;
      }
    }
    .chapter-price {
      align-items: flex-end;
      .price {
        padding-right: 7px;
        span {
          font-size: 12px;
          font-weight: 800;
          color: #fd453f;
          line-height: 17px;
        }
        font-size: 18px;
        font-weight: bold;
        color: #fd453f;
        line-height: 26px;
      }
      .purchased {
        font-size: 12px;
        font-weight: 500;
        color: #8a8c92;
        line-height: 21px;
      }
    }
  }
}
</style>
